import React from 'react'

import { useNavigate, Outlet } from 'react-router-dom'

export default function Home() {
  const Navigate = useNavigate()
  const changeMusic = () => {
    Navigate('/main/home/music/001?user=大黑子', {
      //state传参
      state: [
        {
          name: '园游会',
          id: 'jay',
        },
        {
          name: '龙卷风',
          id: 'jay'
        }
      ]
    })
  }

  const changeNews = () => {
    Navigate('/main/home/news/002?user=小黑子',{
      state:[
        {
          name:'新闻1'
        },
        {
          name:'新闻2'
        },
        {
          name:'新闻3'
        }
      ]
    })
  }

  return (
    <div>
      <p>Home</p>
      <button onClick={changeMusic}>Music</button>
      <button onClick={changeNews}>News</button>
      {/* 子组件插入的地方 */}
      <Outlet />
    </div>

  )
}
